<template>
  <div>
    <div class="add-permiss-box">
      <el-input v-model="newRole.name" placeholder="请输入角色英文名" size="small">
        <template #prepend>ROLE_</template>
      </el-input>
      <el-input v-model="newRole.nameZh" placeholder="请输入角色中文名" size="small"/>
      <el-button icon="el-icon-plus" @click="addRole" size="small" type="primary">添加角色</el-button>
    </div>
    <div class="permiss-main-box">
      <div class="collapse-box">
        <el-collapse v-model="activeName" accordion @change="getRoleMenus">
          <el-collapse-item v-for="role in allRoles" :title="role.nameZh" :name="role.id" :key="role.id">
            <div style="overflow: hidden">
              <el-card>
                <div style="display: flex;justify-content: space-between;margin-bottom: 8px">
                  <div>可访问资源</div>
                  <el-button icon="el-icon-delete" @click="deleteRole(role.id)" type="danger" size="mini"></el-button>
                </div>
                <el-tree
                    ref="tree"
                    :data="allMenus"
                    show-checkbox
                    node-key="id"
                    highlight-current
                    :default-checked-keys="roleMenus"
                    :props="defaultProps"
                    :key="role.id"
                />
                <div style="display: flex;justify-content: flex-end">
                  <el-button size="mini">取消修改</el-button>
                  <el-button type="primary" size="mini" @click="updateRoles(role.id)">确认修改</el-button>
                </div>
              </el-card>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>

  </div>
</template>

<script>
import {deleteRequest, getRequest, postRequest, putRequest} from "@/utils/api";
import {ElMessage} from "element-plus";

export default {
  name: "PermissManage",
  created() {
    this.initRole();
  },
  data() {
    return {
      loading: false,
      // 全部角色列表
      allRoles: [],
      // 全部菜单列表
      allMenus: [],
      // 角色对应菜单列表
      roleMenus: [],
      newRole: {
        name: '',
        nameZh: ''
      },
      activeName: '',
      defaultProps: {
        children: 'children',
        label: 'name',
      }
    }
  },
  methods: {
    addRole() {
      if (this.newRole.name && this.newRole.nameZh) {
        postRequest('/system/basic/permiss/role', this.newRole).then(res => {
          if (res) {
            this.initRole();
          }
        })
      } else {
        ElMessage.error('所有字段不能为空');
      }
    },
    deleteRole(rid) {
      deleteRequest('/system/basic/permiss/role/' + rid).then(res => {
        if (res) {
          this.initRole();
        }
      })
    },
    initRole() {
      this.newRole.name = '';
      this.newRole.nameZh = '';
      this.allMenus = [];
      this.roleMenus = [];
      getRequest('/system/basic/permiss/').then(res => {
        if (res) {
          this.allRoles = res;
        }
      });
      this.initAllMenus();
    },
    initAllMenus() {
      getRequest('/system/basic/permiss/menus').then(res => {
        if (res) {
          this.allMenus = res;
        }
      })
    },
    getRoleMenus(rid) {
      this.roleMenus = [];
      console.log('rid',rid)
      this.initAllMenus()
      if (rid) {
        this.loading = true;
        getRequest('/system/basic/permiss/mid/' + rid).then(res => {
          if (res) {
            this.roleMenus = res;
            this.loading = false;
          }
        }).finally(() => {
          this.loading = false;
        })
      }
    },
    updateRoles(rid) {
      let updateArr = this.$refs.tree.getCheckedKeys(true);
      console.log('update',updateArr);
      let mids = '';
      updateArr.forEach(item => {
        mids += '&mids=' + item;
      })
      putRequest('/system/basic/permiss/?rid=' + rid + mids,).then(res => {
        if (res) {
          this.activeName = '-1';
          this.initRole();
        }
      })
    }
  }
}
</script>

<style scoped>
.add-permiss-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.add-permiss-box .el-input {
  width: 40%;
  margin-right: 15px;
}

.permiss-main-box .collapse-box {
  margin-top: 25px;
}
</style>
